<template>
  <div class="student-item">
    <van-popup v-model:show="isStudent" position="bottom" closeable round @closed="closed">
      <van-nav-bar title="添加学生" />
      <div class="main-form">
        <van-form ref="formDef" @submit="addStudent">
          <van-field v-model="queryParams.stuName" label="学生姓名" placeholder="请输入学生姓名" name="stuName" label-align="left"
            :rules="[{ required: true, message: '请填写学生姓名' }]" />
          <van-field v-model="queryParams.stuPhone" label="手机" placeholder="请输入手机号" name="stuPhone" label-align="left"
            type="number" :rules="[{ required: true, message: '请输入手机号' }]" />
          <van-field v-model="queryParams.stuSexName" is-link readonly label="性别" placeholder="请选择性别" name="stuSexName"
            label-align="left" @click="selectChange('1')" :rules="[{ required: true, message: '请选择性别' }]" />
          <!-- <van-field v-model="queryParams.stuSchoolName" is-link readonly label="学校" placeholder="请选择学校"
            name="stuSchoolName" label-align="left" @click="selectChange('2')"
            :rules="[{ required: true, message: '请选择学校' }]" /> -->
          <van-field v-model="queryParams.stuSchoolName" label="学校" label-align="left" name="stuSchoolName"
            :rules="[{ required: true, message: '请输入学校名称' }]" class="field-main">
            <template #input>
              <InputCustom @update:updateValue="(ev) => selectChange('2', ev)" curType="2" placeholder="请输入学校名称"
                :dataList="schoolList" />
            </template>
          </van-field>
          <!-- <van-field v-model="queryParams.stuGradeName" is-link readonly label="年级" placeholder="请选择年级"
            name="stuGradeName" label-align="left" @click="selectChange('3')"
            :rules="[{ required: true, message: '请选择年级' }]" /> -->
          <van-field v-model="queryParams.stuGradeName" label="年级" label-align="left" name="stuGradeName"
            :rules="[{ required: true, message: '请输入年级' }]" class="field-main">
            <template #input>
              <InputCustom @update:updateValue="(ev) => selectChange('3', ev)" curType="2" placeholder="请输入年级"
                :dataList="gradeList" />
            </template>
          </van-field>
          <!-- <van-field v-model="queryParams.stuClassName" is-link readonly label="班级" placeholder="请选择班级"
            name="stuClassName" label-align="left" @click="selectChange('4')"
            :rules="[{ required: true, message: '请选择班级' }]" /> -->
          <van-field v-model="queryParams.stuClassName" label="班级" label-align="left" name="stuClassName"
            :rules="[{ required: true, message: '请选择班级' }]" class="field-main">
            <template #input>
              <InputCustom @update:updateValue="(ev) => selectChange('4', ev)" curType="2" placeholder="请输入班级"
                :dataList="classlList" />
            </template>
          </van-field>
          <van-button type="primary" :loading="subLoading" native-type="submit">确定</van-button>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model:show="isPup" position="bottom">
      <van-picker :columns="columnsList" :columns-field-names="{
        text: 'name',
        value: 'id',
        children: 'children',
      }" @confirm="onConfirm" @cancel="isPup = false" />
    </van-popup>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { getInitData } from "@/hooks/index.js";
import { useRouter } from "vue-router";
import {
  addClientStudent, // 添加学生
} from "@/api/user.js"
import { showToast } from "vant";
import InputCustom from "@/components/inputCustom/index.vue";

const emits = defineEmits(['update:isStudentData', 'successAddStudent'])
const props = defineProps({
  isStudent: {
    type: Boolean,
    default: false,
  },
});

let isStudent = ref(false)
let isPup = ref(false);

// 弹出框数据
const columnsList = ref([]);
// 学校
const schoolList = ref([]);
// 年级
const gradeList = ref([]);
// 班级
const classlList = ref([]);
// 性别
const sexList = ref([]);

const queryParams = reactive({
  "openId": localStorage.getItem('openid'),        //openid
  "stuName": "",       //学生姓名
  "stuSex": 0,         //性别 0女1男
  "stuPhone": "", // 手机号
  "stuSexName": "",
  "stuSchoolId": "",   //学校id
  "stuSchoolName": "", //学校名称
  "stuGradeId": "",    //年级id
  "stuGradeName": "",  //年级名称
  "stuClassId": "",    //班级id
  "stuClassName": ""   //班级名称
});


// 当前选择的索引
let curStuIndex = ref(0);
// 选择性别，学校，年级，班级
const selectChange = (types, ev) => {
  curStuIndex.value = types;
  console.log(ev, types,curStuIndex.value);
  switch (Number(types)) {
    case 1:
      columnsList.value = sexList.value;
      break;
    case 2:
      columnsList.value = schoolList.value;
      queryParams.stuSchoolId = ev.id
      queryParams.stuSchoolName = ev.name
      break;
    case 3:
      columnsList.value = gradeList.value;
      queryParams.stuGradeId = ev.id
      queryParams.stuGradeName = ev.name
      break;
    case 4:
      columnsList.value = classlList.value;
      queryParams.stuClassId = ev.id
      queryParams.stuClassName = ev.name
      break;
    default:
      columnsList.value = sexList.value;
  }
  if (types != '1') {
    return
  }
  isPup.value = true;
};

const onConfirm = (ev) => {
  let item = ev['selectedOptions'][0]
  console.log(ev,'ev',item)
  switch (Number(curStuIndex.value)) {
    case 1:
      queryParams.stuSex = item.id        //性别 0女1男
      queryParams.stuSexName = item.name
      break;
    case 2:
      queryParams.stuSchoolId = item.id   //学校id
      queryParams.stuSchoolName = item.name //学校名称
      break;
    case 3:
      queryParams.stuGradeId = item.id    //年级id
      queryParams.stuGradeName = item.name  //年级名称
      break;
    case 4:
      queryParams.stuClassId = item.id    //班级id
      queryParams.stuClassName = item.name   //班级名称
      break;
  }
  console.log(ev, '555', queryParams, curStuIndex.value)
  isPup.value = false;
};

// 添加学生
let formDef = ref();
let subLoading = ref(false)
const addStudent = async (errorInfo) => {
  let params = queryParams
  try {
    subLoading.value = true
    let data = await addClientStudent(params)
    subLoading.value = false
    isStudent.value = false
    showToast("学生添加成功！")
    emits('successAddStudent')
  } catch (error) {
    subLoading.value = false
  }
}

const closed = () => {
  emits('update:isStudentData', false)
}


const { getdata } = getInitData();
onMounted(async () => {
  isStudent.value = props.isStudent
  let { schoolListData, gradeListData, classlListData, sexListData } = await getdata();
  schoolList.value = schoolListData;
  gradeList.value = gradeListData;
  classlList.value = classlListData;
  sexList.value = sexListData;
});
</script>

<style lang="scss" scoped>
.van-button {
  margin: 1em;
  width: calc(100% - 2em);
}

.field-main {
  overflow: visible !important;
}

.van-cell-group--inset {
  overflow: visible !important;
}
</style>
